<template>
  <div style="display: flex;flex-direction: column;width: 80%;color: #000000">
    <h2>当前余额:￥<i style="color: red">{{balance}}</i></h2>
    <el-form>
      <el-form-item>
        <el-input type="number" size="large" label="钱包充值" placeholder="输入充值金额,最少充值1元" min="1" v-model="rechargeAmount"></el-input>
      </el-form-item>
      <el-button type="primary" size="default" @click="recharge">充值</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
  import {onMounted,ref} from "vue";
  import {useRouter} from "vue-router";
  import {getMemberWallet, walletRecharge} from "@/api/payment.ts";
  import storage from "@/utils/storage.ts";
  import {ElMessage} from "element-plus";

  const router = useRouter()
  const activeMenuItem = router.currentRoute.value.path;
  const activeName = "/profile";

  const balance = ref(0)

  const user = ref({})

  const rechargeAmount = ref()

  const recharge = () => {
    const username = user.value.username;
    const userId = user.value.id;
    const recharge = {
      memberName: username,
      memberId: userId,
      amount: rechargeAmount.value,
      remark: '钱包充值',
    };
    walletRecharge(recharge).then((resp) => {
      if(resp.code === '00000') {
        ElMessage.success('充值成功')
      }else{
        ElMessage.success('充值失败')
      }
      memberWallet()
    })
  }

  const memberWallet = () => {
    getMemberWallet({memberId:user.value.id}).then((res)=>{
      const data = res.data
      balance.value = data ? data.amount : 0
    })
  }

  onMounted(()=>{
    user.value = JSON.parse(storage.getItem("userInfo"))
    memberWallet()
  })
</script>

<style scoped>

</style>